<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Zoom and anti-aliasing | Canvas pixel manipulation</title>
  </head>
  <body>
    <table>
			<thead>
				<tr>
					<th>Source</th>
					<th>imageSmoothingEnabled=true</th>
					<th>imageSmoothingEnabled=false</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<canvas id="canvas" width="300" height="227"></canvas>
					</td>
					<td align="center">
						<canvas id="smoothed-zoom" width="200" height="200"></canvas>
					</td>
					<td align="center">
						<canvas id="pixelated-zoom" width="200" height="200"></canvas>
					</td>
				</tr>
			</tbody>
		</table>






		<script src="image-smoothing.js"></script>
  </body>
</html>
